<template>
  <div class="entrance-guard-main">
    <div class="header">
      <span class="title">门禁设备情况</span>
    </div>
    <div style="border-bottom: 1px solid white ;opacity: 0.7;">

    </div>
    <div ref="box" style="height:200px;width:100%;">

    </div>
    <div class="footer">
      <div class="item">
        <span>
          设备总数
        </span>
        <span>
          {{facilityObj.total}}
        </span>
      </div>
      <div class="item">
        <span>在线设备</span>
        <span>{{facilityObj.online}}</span>
      </div>
      <div class="item">
        <span>离线异常设备</span>
        <span>{{facilityObj.offonline}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  data() {
    return {
      facilityObj: {
        total: 4932,
        online: 3442,
        offonline: 1405
      }
    }
  },
  methods: {
    print() {
      let print = echarts.init(this.$refs.box)
      let option = {
        color: ["blue","green","yellow","red"], // 改变标题颜色 与线条颜色 统一
        legend: {
          top: "bottom",
          show: false
        },
        title: [
          {
            // text: '门禁设备情况',
            textStyle: {
              color: "yellow"
            }
          }
        ],
        emphasis: {
          label: {
            show: true,
            fontSize: "12",
            fontWeight: "bold",
            color: "yellow"
          }
        },
        toolbox: {
          show: false
        },
        tooltip: {
          // show: false,
          trigger: "item",
          textStyle: {
            fontSize: 12,
            color: "yellow"
          }
          // formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "重点人员占比",
            type: "pie",
            radius: [40, 50],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
                color: "white"
              }
            },
            label: {
              show: false,
              fontSize: 12,
              fontWeight: "bold",
              position: "center",
              formatter: "{d}%\n {b} "
            },
            data: [
              {
                value: 1048, name: "搜索引擎"
              },
              {
                value: 735, name: "直接访问"
              },
              {
                value: 580, name: "邮件营销"
              },
              {
                value: 484, name: "联盟广告"
              },
              {
                value: 300, name: "视频广告"
              }
            ]
          }
        ]
      }
      print.setOption(option)
    }
  },
  mounted() {
    this.print()
  }
}
</script>

<style lang="scss">
  .entrance-guard-main {
    .header {
      box-sizing: border-box;
      padding-top: 20px ;
      padding-left: 15px ;
      padding-bottom: 5px ;
      .title {
        color: #FFD700;
        opacity: 0.7;
      }
    }
    .footer {
      color: yellow;
      display: flex;
      justify-content: space-around;
      box-sizing: border-box;
      padding-left: 60px;
      .item {
        opacity: 0.7;
        span {
          display: block;
        }
      }
    }
  }
</style>